<div class="max-w-3xl mx-auto sm:rounded-lg sm:shadow-sm p-4 sm:mt-8 sm:mb-4 <%= yass(bg: color) %>">
  <div class="flex">
    <div class="shrink-0">
      <%= inline_svg_tag icon_path(icon: icon), class: "h-5 w-5 #{yass(icon: color)}", aria_hidden: true %>
    </div>

    <div class="ml-3">
      <% if title.present? %>
        <h3 class="text-sm font-medium <%= yass(title: color) %>"><%= title %></h3>
      <% end %>

      <div class="text-sm flex-1 md:flex md:justify-between">
        <%= content_tag(messages_tag, role: "list", class: "list-disc space-y-1 #{messages_classes}") do %>
          <% messages.each do |message| %><%= message %><% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>
